<template>
  <div class="selectClass">
    <el-dialog
      :visible.sync="show"
      @closed="handelclose"
      center
      lock-scroll
      :append-to-body="true"
      custom-class="showSelectClass"
    >
      <div slot="title">选择班级</div>
      <div>
        <div class="selectBox">
          <selectClassBtn
            v-if="show"
            :courseData="courseData"
            @handleChange="handleChange"
          />
          <!-- <el-select
            v-model="value"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="选择需要查看的班级"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
        </div>
        <div class="btnBox">
          <el-button type="primary" @click="handleConfirm">确认</el-button>
          <!-- <el-link :underline="false" class="skip" @click="handleSkip"
            >跳过</el-link
          > -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import selectClassBtn from "@/components/selectClass/component/selectClassBtn";
export default {
  components: {
    selectClassBtn,
  },
  data() {
    return {
      show: false,
      list: [],
      loading: false,
      states: [],
      value: [],
    };
  },
  props: {
    isShow: Boolean,
    routeName: String,
    courseData: Object,
  },
  watch: {
    isShow(newValue) {
      this.show = newValue;
      // this.handlePushOption();
    },
    async courseData(newValue) {
      if (newValue.classIDList) {
        this.changeClassIDToName()
      }
    },
  },
  async created() {
    const res = await this.$store.dispatch("class/getClass");
  },
  methods: {
    handelclose() {
      this.$parent.isShow = false;
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    handleConfirm() {
      this.handleSkip();
    },
    handleSkip() {
      if (!this.routeName)
        return this.$antdMessage.error({
          content: "操作失败，请刷新页面后重试！",
        });
      this.$router.push({
        name: this.routeName,
        query: {
          currNo: this.courseData.currNo,
          courseID: this.courseData.courseID,
          // filter: this.value.join(","),
          filter: this.value.length ? this.value : undefined,
        },
        params: {
          id: this.courseData.currNo,
        },
      });
    },
    handleChange(val) {
      this.value = val;
    },
    // 获取班级信息
    async changeClassIDToName() {
      const list = await this.$store.dispatch("class/gClassList");
      this.courseData.classNameList = list
        .filter((item) =>
          this.courseData.classIDList.split(",").includes(item.classID + "")
        )
        .map((item) => item.className)
        .join(",");
    },
  },
  mounted() {
    this.list = this.states.map((item, index) => {
      return { value: `${index}`, label: `${item}` };
    });
  },
};
</script>

<style lang="stylus" scoepd>
.selectClass {
}

.showSelectClass {
  margin-top: calc((100vh / 2) - 150px) !important;
  text-align: center;

  .selectBox, .btnBox {
    text-align: center;

    .el-select {
      min-height: 35px;

      .el-input, .el-input__inner {
        min-height: 35px;
        line-height: 35px;
      }
    }
  }

  .btnBox {
    margin-top: 12px;

    .skip {
      margin-left: 15px;
    }
  }
}
</style>